import {Card, Col, Row, Space, Switch, Tag, Typography} from "@douyinfe/semi-ui";
import Meta from "@douyinfe/semi-ui/lib/es/card/meta.js";
import {IconLock, IconSemiLogo, IconSend} from "@douyinfe/semi-icons";
import '../../css/home.css';
import {GoogleAuthProvider} from "firebase/auth";
import {useEffect, useState} from "react";
import {Cdystate, getcardlist} from "../../api/api.js";
import Schedule_EForm from "./compents/Schedule_EForm.jsx";

function Schedule_Card() {
    const provider = new GoogleAuthProvider();
    const {Text} = Typography;
    const [switchState, setSwitchState] = useState(true);
    const [switchLoading, setSwitchLoading] = useState(false)
    const [data, setdataa] = useState([])
    const enable = null
    useEffect(() => {
        async function fetchData() {
            const res = await getcardlist()
            console.log(res)
            res.data.data.forEach(v => {
                if (v.isEnable == 0) {
                    v.isEnable = false
                } else {
                    v.isEnable = true
                }
            })
            console.log(res.data.data)
            setdataa(res.data.data)
            console.log(data)
        }

        fetchData();

    }, [])

    function onload(id,enable) {
        setSwitchLoading(true)
        setTimeout(() => {
            setSwitchLoading(false)
            setdataa(data.map((item) =>{
                if (item.id==id){
                    // return {...item.isEnable,...enable}
                    item.isEnable = enable
                    if (enable==true){
                        const data = new FormData();
                        data.append("id",item.id)
                        data.append("state",1)
                        Cdystate(data)
                    }else {
                        const data = new FormData();
                        data.append("id",item.id)
                        data.append("state",0)
                        Cdystate(data)
                    }

                }
                return item;
            }))
            // setSwitchState(!switchState)
        }, 1000)
    }

    function ceshi() {
        console.log("ds")
    }


    return (

        <Row>
            {data.map(item => (
                <Col span={8} key={item.id}>
                    <Card
                        headerLine={false}
                        shadows='hover'
                        id={'card'}
                        style={{maxWidth: 480, marginBottom: "20px"}}
                        title={
                            <Meta
                                title={item.name}
                                avatar={
                                    <IconSemiLogo/>
                                }
                                description={
                                    <>
                                        <div>{item.isEnable ? (
                                                <div><Tag style={{background: '#e8ffea', color: '#00b42a'}}> <IconSend
                                                    style={{fontSize: '12px'}}/>&nbsp;&nbsp;已启用 </Tag></div>)
                                            : (<div>  <Tag color="red" type="light"><IconLock style={{fontSize: '12px'}} />&nbsp;&nbsp;已停用</Tag></div>)

                                        }</div>
                                    </>
                                }
                            />
                        }
                        headerExtraContent={
                        <div>
                            <Schedule_EForm info ={item}></Schedule_EForm>
                        </div>
                    }
                        footerLine={false}
                        footerStyle={{display: 'flex', justifyContent: 'flex-end'}}
                        footer={
                        <Space>
                            <Text onClick={ceshi} type="secondary">是否开启</Text>
                            <Switch defaultChecked={item.isEnable} checked={item.isEnable} onChange={(v, e) => onload(item.id,!item.isEnable)} loading={switchLoading} aria-label="a switch for semi demo"></Switch>
                        </Space>
                    }
                        >
                    <Text type="quaternary">{item.details}</Text>

                </Card>
                </Col>
                ))}
        </Row>


    );
}

export default Schedule_Card;